<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--
			传递参数两种方式：
			1、query：/login?id=1
			2、param：/login?1&wangzy
			-->
			<router-link to="/login?id=1">登陆</router-link>
<!--			<router-link to="/register/1/wangzy">注册</router-link>-->
			<router-link to="/register/1&wangzy">注册</router-link>
			<router-view></router-view>
			id:{{ $route.query.id }} <br>
			reid:{{ $route.params.id }} <br>
			rename:{{ $route.params.name }}
		</div>
		<template id="login">
			<h1>登陆组件</h1>
		</template>
		<template id="register">
			<h1>注册组件</h1>
		</template>
		<script>
			let loginCom = {
				template:"#login",
				created(){
					console.log(this.$route.query)
				}
			}

			let registerCom = {
				template:"#register",
			}

			let routes = [
				{path: "/", redirect: "/login"},
				{path: "/login", component: loginCom},
				// {path: "/register/:id/:name", component: registerCom}
				{path: "/register/:id&:name", component: registerCom}
			]

			let router = new VueRouter({
				routes
			})

			var vue = new Vue({
				el:'#app',
				data:{

				},
				methods:{

				},
				components:{

				},
				router:router
			})
		</script>
	</body>
</html>
